<template>
  <div class="event_config card_table">
    <header>
      <span class="o">配置面板</span>
      <span class="t">
        <span class="tool_top" @click="new_config">
          <i class="el-icon-refresh"></i>重置
        </span>
        <span class="tool_top" @click="queryMessage">
          <i class="el-icon-search"></i>查询
        </span>
      </span>
    </header>
    <section v-show="switch_bool">
      <div v-for="(_i,_in) in config.messures" :key="_in" class="messures_line">
        <div class="til valueTreeOne">
          <i
            @click="_i.floadBool=_i.floadBool?false:true"
            class="el-icon-arrow-right"
            :style="{transform:_i.floadBool?'rotate(90deg)':'rotate(0deg)'}"
          ></i>
          <span class="icon">{{convert(_in+1)}}</span>
          <template v-if="_i.nameBool">
            <el-input
              @blur="_i.nameBool=false"
              size="small"
              :style="{width:'4rem'}"
              v-model="_i.name"
              placeholder="请输入内容"
            ></el-input>
          </template>
          <template v-else>{{_i.name}}</template>
          <i v-if="!_i.nameBool" @click="_i.nameBool = !_i.nameBool" class="el-icon-edit"></i>
          <span class="tools_one" @click="indexScreenFun(_i,_in)">
            <i class="el-icon-search"></i>
            <span>筛选</span>
          </span>
          <span class="tools_one" @click="messuresCopy(_i,_in)">
            <i class="el-icon-printer"></i>
            <span>复制</span>
          </span>
          <i class="el-icon-close toosl_one err" @click="messuersDel(_in)"></i>
        </div>
        <div class="til valueTreeOne valueTreeTwo">
          <dropdownTrigger
            :activeItem="_i.field"
            @change="indexFieldChange($event,_i,_in)"
            @groupChange="configShowGroup"
            class="key flex_cen"
            :overallScreeningData="groupingData"
          ></dropdownTrigger>的
          <el-cascader
            filterable
            size="small"
            class="key"
            @change="aggregatorChange($event,_in)"
            v-model="_i.aggregatorArr"
            :options="_i.aggregatorList"
          ></el-cascader>
        </div>
        <div class="deep_screen" v-show="_i.floadBool">
          <conditionScreening
            :key="updateNumScreen"
            :fieldArr="_i.eventId=='_Anything'?anyThingPropList:_i.fieldArr"
            @change="changeScreen($event,_i,_in)"
            :limit="2"
            deep="并且满足"
            add="条件新增"
            :ref="_i.eventId+'computedTree' + _in"
            :filterEnter="_i.filter"
          ></conditionScreening>
        </div>
      </div>

      <div class="index_add" v-if="groupingData.length>0">
        <span @click="index_add">
          <i class="el-icon-circle-plus"></i>指标
        </span>
      </div>
      <!-- 全局筛选 -->
      <template v-if="fieldArrTotal.length>0">
        <conditionScreening
          :key="updateNumTotal"
          :limit="2"
          deep="并且满足"
          ref="computedTreeTotal"
          add="条件新增"
          @change="overallSituationScreen"
          :filterEnter="config.filter"
          :fieldArr="fieldArrTotal"
        ></conditionScreening>

        <div class="total_screen" @click="$refs.computedTreeTotal.initAdd()">
          <i class="el-icon-plus"></i>
          全局筛选
        </div>
      </template>
      <!-- 分组配置区域 -->
      <div class="group_cig" v-if="fieldArrTotal.length>0">
        <span class="txt">按</span>

        <dropdownTriggerLayered
          class="tags"
          v-for="(_i,_in) in config.byFields"
          :key="_i.value"
          @change="config.byFields.splice(_in, 1, $event)"
          @del="config.byFields.splice(_in,1)"
          :del="true"
          :group="true"
          :activeItemEnter="_i"
          :promptPanel="true"
          :overallScreeningData="fieldArrTotal"
        ></dropdownTriggerLayered>

        <span class="txt labelbox" :style="{position:'relative'}">
          <i class="el-icon-plus" @click="labelShowGroup"></i>

          <dropdownTriggerLayered
            :group="true"
            @change="groupScreenAdd($event)"
            :promptPanel="true"
            class="addGroup"
            ref="newaddgroup"
            :overallScreeningData="fieldArrTotal"
          ></dropdownTriggerLayered>分组
        </span>
      </div>
    </section>
    <footer class="no_copy" @click="switch_bool=!switch_bool">
      <span v-if="switch_bool">
        收起
        <i class="el-icon-arrow-up"></i>
      </span>
      <span v-else>
        展开
        <i class="el-icon-arrow-down"></i>
      </span>
    </footer>
    <groupEditing @change="queryEventGroup" ref="groupEditing"></groupEditing>
  </div>
</template>

<script>
import conditionScreening from "@/components/conditionScreening/computedTree.vue";
import dropdownTrigger from "@/components/dropdownTrigger/index.vue";
import dropdownTriggerLayered from "@/components/dropdownTriggerLayered/index.vue";
import groupEditing from "@/components/groupEditing/index.vue"; // 引入事件分组管理组件
import analysisApi from "@/utils/api/analysisApi.js";

export default {
  name: "event_config",
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    config: {
      handler() {},
      deep: true
    }
  },
  components: {
    conditionScreening,
    groupEditing,
    dropdownTrigger,
    dropdownTriggerLayered
  },
  data() {
    return {
      index_value_list: [
        {
          value: "general",
          label: "总次数"
        },
        {
          value: "unique",
          label: "用户数"
        },
        {
          value: "average",
          label: "人均次数"
        }
      ], // 指标目标值
      anyThingPropList: [], // 任意事件属性列
      fieldArrTotal: [], // 全局筛选，第一列可选值数组
      updateNumTotal: 0, // 刷新变量 全局筛选
      updateNumScreen: 0, // 刷新变量 指标
      groupingData: [], // 事件分组
      shiduan_l: [],
      shiduan_r: [],
      zhouqi: null,
      yj_index: 0, // 预警下标
      drawer_bool: false, // 抽屉
      table_size: "medium",
      switch_bool: true // 是否展开
    };
  },
  methods: {
    // 聚合操作更改函数
    aggregatorChange(value,index){
      this.config.messures[index].aggregator = value[value.length-1];

      if(value[0]!=='general'&&value[0]!=='unique'&&value[0]!=='average'){
        let str = 'event.'
        this.config.messures[index].aggregatorList.map(_i=>{
          if(_i.value==value[0]){
            str = _i.propertyLogo + '.'
          }
        })  
         this.config.messures[index].field.value  = str+this.config.messures[index].eventId+'.'+value[0];
      }else{
         this.config.messures[index].field.value  = null;
      }
    },
    // 指标复制
    messuresCopy(item, index) {
      this.config.messures.push({
        id: Math.random()
          .toString(36)
          .substr(2),
        eventId: item.eventId,
        filter: item.filter,
        name: item.name + (index + 1), // 指标显示名称
        field: item.field, // 指标 key
        fieldArr: item.fieldArr, // 根据field请求到筛选组件用到的第一列数据
        aggregator: item.aggregator, // 指标 value
        aggregatorArr:item.aggregatorArr,
        aggregatorList:item.aggregatorList,
        floadBool: item.floadBool,
        nameBool: item.nameBool
      });
    },
    messuersDel(index) {
      if (this.config.messures.length > 1) {
        this.config.messures.splice(index, 1);
        this.newTOTAL();
      }
    },
    // 查询触发函数
    queryMessage() {
      // 因为指标下的 事件id  (eventId)  不能做指标标识 所以追加拼接后的name 拼接后的标识id
      let indexValueObj = {};
      this.index_value_list.map(_i => {
        indexValueObj[_i.value] = _i.label;
      });
      let obj = JSON.parse(JSON.stringify(this.config));
      try {
        if (obj.messures) {
          obj.messures.map(_i => {
            _i.aggregatorName = indexValueObj[_i.aggregator]; // 事件属性名称追加
            // _i.name = _i.eventName + "的" + indexValueObj[_i.aggregator]; // 指标名称凭借
            _i.echartId = _i.eventId + _i.aggregator; // 指标标识拼接
          });
        }
      } catch (err) {
        console.log("指标name处理异常", err);
      }
      this.$emit("query", obj);
    },
    // 获取全局筛选下的第一列可选值
    async fieldArrTotalGet(arr) {
      // let res = await analysisApi.eventAnalysis.eventAnalysisPropertyList({
      //   appId:this.appId,
      //   eventId: "",
      //   eventIdList: arr
      // });
      let res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId,
        eventId: "",
        eventIdList: arr
      });
      if (res && res.success) {
        let _arr = [];
        if (
          res.value.eventPropertyList &&
          res.value.eventPropertyList.length > 0
        ) {
          _arr.push({
            id: Math.random()
              .toString(36)
              .substr(2),
            name: "事件属性",
            children: res.value.eventPropertyList
          });
        }
        if (
          res.value.userPropertyList &&
          res.value.userPropertyList.length > 0
        ) {
          _arr.push({
            id: Math.random()
              .toString(36)
              .substr(2),
            name: "用户属性",
            children: res.value.userPropertyList
          });
        }
        if (
          res.value.userGroupRuleList &&
          res.value.userGroupRuleList.length > 0
        ) {
          _arr.push({
            id: Math.random()
              .toString(36)
              .substr(2),
            name: "用户分群",
            children: res.value.userGroupRuleList
          });
        }
        this.fieldArrTotal = _arr;
      }
    },
    // 每条指标的筛选点击函数
    indexScreenFun(item, index) {
      try {
        if (item.fieldArr && item.fieldArr.length > 0) {
          this.$refs[item.eventId + "computedTree" + index][0].initAdd();
        } else if (
          item.eventId == "_Anything" &&
          this.anyThingPropList.length > 0
        ) {
          this.$refs[item.eventId + "computedTree" + index][0].initAdd();
        } else {
          this.$message({
            message: "暂无当前指标属性组",
            type: "warning"
          });
        }
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 每条指标的 key 更改   查询指标切换后，筛选组件的第一列可选值
    async indexFieldChange(value, item, index) {
      try {
        let obj = JSON.parse(JSON.stringify(this.config.messures[index]));
        if (item.eventId == obj.eventId) {
          let obj = {
            field: value,
            aggregator: null,
            name: this.config.messures[index].name,
            eventId: value.eventId,
            eventName: value.eventName,
            filter: null,
            floadBool: true,
            nameBool: this.config.messures[index].nameBool,
            fieldArr: [],
            aggregatorArr:[],
            aggregatorList:[
              {
                value: "general",
                label: "总次数"
              },
              {
                value: "unique",
                label: "用户数"
              },
              {
                value: "average",
                label: "人均次数"
              }
            ],        // 每条指标下的聚合操作可选值
          };
          this.config.messures.splice(index, 1, obj);
          this.updateNumScreen++;
          // let res = await analysisApi.eventAnalysis.eventAnalysisPropertyList({
          //   appId:this.appId,
          //   eventId: value.eventId
          // });
          let res = await this.$analysisApi.userAnalysis.userPropertyList({
            appId: this.appId,
            eventId: value.eventId
          });
          if (res && res.success) {
            let _arr = [];
            if (
              res.value.eventPropertyList &&
              res.value.eventPropertyList.length > 0
            ) {
              res.value.eventPropertyList.map(_i => {
                if (_i.dataType == "STRING" || _i.dataType == "字符串") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "uniqCount",
                        label: "去重数"
                      }
                    ]
                  });
                }
                if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "SUM",
                        label: "总和"
                      },
                      {
                        value: "AVG",
                        label: "均值"
                      },
                      {
                        value: "MAX",
                        label: "最大值"
                      },
                      {
                        value: "MIN",
                        label: "最小值"
                      },
                      {
                        value: "uniqAvg",
                        label: "人均值"
                      },
                      {
                        value: "uniqCount",
                        label: "去重"
                      }
                    ]
                  });
                }
              });
              _arr.push({
                id: Math.random()
                  .toString(36)
                  .substr(2),
                name: "事件属性",
                children: res.value.eventPropertyList
              });
            }
            if (
              res.value.userPropertyList &&
              res.value.userPropertyList.length > 0
            ) {
              res.value.userPropertyList.map(_i => {
                if (_i.dataType == "STRING" || _i.dataType == "字符串") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "uniqCount",
                        label: "去重数"
                      }
                    ]
                  });
                }
                if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "SUM",
                        label: "总和"
                      },
                      {
                        value: "AVG",
                        label: "均值"
                      },
                      {
                        value: "MAX",
                        label: "最大值"
                      },
                      {
                        value: "MIN",
                        label: "最小值"
                      },
                      {
                        value: "uniqAvg",
                        label: "人均值"
                      },
                      {
                        value: "uniqCount",
                        label: "去重"
                      }
                    ]
                  });
                }
              });
              _arr.push({
                id: Math.random()
                  .toString(36)
                  .substr(2),
                name: "用户属性",
                children: res.value.userPropertyList
              });
            }
            if (
              res.value.userGroupRuleList &&
              res.value.userGroupRuleList.length > 0
            ) {
               res.value.userGroupRuleList.map(_i => {
                if (_i.dataType == "STRING" || _i.dataType == "字符串") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "uniqCount",
                        label: "去重数"
                      }
                    ]
                  });
                }
                if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
                  obj.aggregatorList.push({
                    value: _i.propertyId,
                    label: _i.propertyName,
                    propertyLogo:_i.propertyLogo,
                    children: [
                      {
                        value: "SUM",
                        label: "总和"
                      },
                      {
                        value: "AVG",
                        label: "均值"
                      },
                      {
                        value: "MAX",
                        label: "最大值"
                      },
                      {
                        value: "MIN",
                        label: "最小值"
                      },
                      {
                        value: "uniqAvg",
                        label: "人均值"
                      },
                      {
                        value: "uniqCount",
                        label: "去重"
                      }
                    ]
                  });
                }
              });
              _arr.push({
                id: Math.random()
                  .toString(36)
                  .substr(2),
                name: "用户分群",
                children: res.value.userGroupRuleList
              });
            }
            obj.fieldArr = _arr;
            this.config.messures.splice(index, 1, obj);
            this.newTOTAL();
            this.updateNumScreen++;
          }
        }
      } catch (err) {
        console.log(err, "指标获取错误");
      }
    },
    async newTOTAL() {
      this.fieldArrTotal = [];
      this.config.filter = null;
      this.config.byFields = [];
      let queryArr = [];
      this.config.messures.map(_i => {
        queryArr.push(_i.eventId);
      });
      this.fieldArrTotalGet(queryArr);
    },
    // 查询事件分组数据函数
    async queryEventGroup() {
      let res = await analysisApi.eventAnalysis.eventGroupQuery({
        appId: this.appId
      });
      if (res && res.success) {
        res.value.map(_i => {
          if (_i.appId == "0" || _i.groupName == "通用分组") {
            _i.mateEventList.unshift({
              eventId: "_Anything",
              eventName: "任意事件",
              productCode: "dx"
            });
          }
        });
        this.groupingData = res.value;
        console.log(this.groupingData, "888888");
      } else {
        this.groupingData = [];
      }
    },
    labelShowGroup() {
      try {
        this.$refs.newaddgroup.panelBool_change();
      } catch (err) {
        console.log(err, "错误");
      }
    },
    // 打开事件分组组件
    configShowGroup() {
      try {
        this.$refs.groupEditing.showHidden(true);
      } catch (err) {
        console.log(err, "错误");
      }
    },
    overallSituationScreen(value) {
      this.config.filter = value;
    },
    changeScreen(value, item, index) {
      try {
        this.config.messures.map((_i, _in) => {
          if (_i.eventId == item.eventId && _in == index) {
            _i.filter = value;
          }
        });
      } catch (err) {
        console.log(err, "错误");
      }
    },
    convert(num) {
      return num <= 26
        ? String.fromCharCode(num + 64)
        : this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
    },
    // 指标追加
    index_add() {
      this.config.messures.push({
        id: Math.random()
          .toString(36)
          .substr(2),
        floadBool: true,
        filter: null, // 指标下的筛选
        nameBool: false,
        name: "未定义指标" + (this.config.messures.length + 1), // 指标显示名称
        field: null, // 指标 key
        fieldArr: [], // 根据field请求到筛选组件用到的第一列数据
        aggregator: "general", // 指标 value
        aggregatorArr:['general'],
        aggregatorList:[]
      });
    },
    // 配置面板，新增分组函数
    groupScreenAdd(newValue) {
      let bool = false;
      console.log(newValue, "分组新增");
      this.config.byFields.map(_i => {
        if (_i.id == newValue.id) {
          bool = true;
        }
      });
      if (!bool) {
        console.log(123);
        this.config.byFields.push(newValue);
      }
    },
    // 配置面板重置函数
    new_config() {
      try {
        this.config.filter = null;
        this.config.byFields = [];
        this.config.messures = [];
        this.updateNumScreen++;
        this.updateNumTotal++;
      } catch (err) {
        this.$message({
          message: err,
          type: "warning"
        });
      }
    },
    // 获取任意事件属性列表
    async getAnyThingPropList() {
      let res = await analysisApi.eventAnalysis.eventAnalysisPropertyList({
        appId: this.appId,
        eventId: "_Anything",
        eventIdList: []
      });
      if (res && res.success) {
        let _arr = [];
        if (
          res.value.eventPropertyList &&
          res.value.eventPropertyList.length > 0
        ) {
          _arr.push({
            id: Math.random()
              .toString(36)
              .substr(2),
            name: "事件属性",
            children: res.value.eventPropertyList
          });
        }
        if (
          res.value.userPropertyList &&
          res.value.userPropertyList.length > 0
        ) {
          _arr.push({
            id: Math.random()
              .toString(36)
              .substr(2),
            name: "用户属性",
            children: res.value.userPropertyList
          });
        }
        this.anyThingPropList = _arr;
      }
    },
    // 获取指标下的聚合操作数组
    async aggregatorListGet(eventId,index) {
      let arr = [
        {
          value: "general",
          label: "总次数"
        },
        {
          value: "unique",
          label: "用户数"
        },
        {
          value: "average",
          label: "人均次数"
        }
      ];
      let res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId,
        eventId: eventId
      });
      if (res && res.success) {
        if (
          res.value.eventPropertyList &&
          res.value.eventPropertyList.length > 0
        ) {
          res.value.eventPropertyList.map(_i => {
            if (_i.dataType == "STRING" || _i.dataType == "字符串") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "uniqCount",
                    label: "去重数"
                  }
                ]
              });
            }
            if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "SUM",
                    label:  "总和"
                  },
                  {
                    value: "AVG",
                    label: "均值"
                  },
                  {
                    value: "MAX",
                    label: "最大值"
                  },
                  {
                    value: "MIN",
                    label: "最小值"
                  },
                  {
                    value: "uniqAvg",
                    label: "人均值"
                  },
                  {
                    value: "uniqCount",
                    label: "去重"
                  }
                ]
              });
            }
          });
        }
        if (
          res.value.userPropertyList &&
          res.value.userPropertyList.length > 0
        ) {
          res.value.userPropertyList.map(_i => {
            if (_i.dataType == "STRING" || _i.dataType == "字符串") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "uniqCount",
                    label: "去重数"
                  }
                ]
              });
            }
            if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "SUM",
                    label: "总和"
                  },
                  {
                    value: "AVG",
                    label: "均值"
                  },
                  {
                    value: "MAX",
                    label: "最大值"
                  },
                  {
                    value: "MIN",
                    label: "最小值"
                  },
                  {
                    value: "uniqAvg",
                    label: "人均值"
                  },
                  {
                    value: "uniqCount",
                    label: "去重"
                  }
                ]
              });
            }
          });
        }
        if (
          res.value.userGroupRuleList &&
          res.value.userGroupRuleList.length > 0
        ) {
          res.value.userGroupRuleList.map(_i => {
            if (_i.dataType == "STRING" || _i.dataType == "字符串") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "uniqCount",
                    label: "去重数"
                  }
                ]
              });
            }
            if (_i.dataType == "NUMBER" || _i.dataType == "数值") {
              arr.push({
                value: _i.propertyId,
                label: _i.propertyName,
                propertyLogo:_i.propertyLogo,
                children: [
                  {
                    value: "SUM",
                    label: "总和"
                  },
                  {
                    value: "AVG",
                    label: "均值"
                  },
                  {
                    value: "MAX",
                    label: "最大值"
                  },
                  {
                    value: "MIN",
                    label: "最小值"
                  },
                  {
                    value: "uniqAvg",
                    label: "人均值"
                  },
                  {
                    value: "uniqCount",
                    label: "去重"
                  }
                ]
              });
            }
          });
        }
      }
      this.config.messures[index].aggregatorList = arr;
    }
  },
  beforeCreate() {},
  async created() {
    this.queryEventGroup();
    let arr = [];
    this.config.messures.map((_i,_in) => {
      if (!_i.aggregatorArr || _i.aggregatorArr.length == 0) {
        _i.aggregatorArr = [_i.aggregator];
      }
      this.aggregatorListGet(_i.eventId,_in);
      arr.push(_i.eventId);
    });
    this.fieldArrTotalGet(arr);
    this.getAnyThingPropList();
  },
  beforeMount() {},
  mounted() {},
  computed: {
    appId() {
      return this.$store.state.global.appId;
    }
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.labelbox {
  display: inline-block;
  min-width: 2.6rem;
  margin: 0.2rem 0;
  height: 0.4rem;
}
// ::v-deep .el-input__inner {
//   height: 0.52rem;
// }
::v-deep .addGroup {
  border: none;
  left: -0.4rem;
  position: absolute;
  background: rgba($color: #01b27a, $alpha: 0);
  .activeItemCont {
    opacity: 0;
  }
}
::v-deep .addGroup:hover {
  border: none;
  box-shadow: none;
}
// 级联样式
.deep_screen .one_line:hover {
  background: rgba($color: #409eff, $alpha: 0.2);
}

.event_config::-webkit-scrollbar {
  display: none;
}
.event_config {
  header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    cursor: pointer;
    box-sizing: border-box;
    .t {
      .tool_top {
        font-size: 14px;
        font-weight: 400;
        margin: 0 10px;
        i {
          margin: 0 6px;
        }
      }
      .tool_top:hover {
        color: #01b27a;
        // font-size: 14px;
        font-weight: 500;
      }
    }
  }
  footer {
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px auto 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 10px;
    border-top: 1px solid #ebeef5;
    color: #303133;
    box-sizing: border-box;
    span {
      padding-right: 20px;
      i {
        margin: 0 10px;
      }
    }
  }
  footer:hover {
    color: #307ef2;
    font-weight: 500;
  }
  section {
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    box-sizing: border-box;
    // padding: 10px 0 0;
    // 指标筛选
    .index_add {
      width: 100%;
      padding: 0 0 10px 0.5%;
      margin: 0 auto 10px;
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      span {
        margin-right: 0.6rem;
        i {
          font-weight: 800;
          font-size: 0.3rem;
          color: #00bf8a;
          margin: 0 10px 0 0;
        }
      }
    }
    .messures_line {
      width: 99%;
      margin: 0.1rem auto;
      min-height: 50px;
      border-radius: 4px;
      .til {
        display: flex;
        height: 50px;
        align-items: center;
        .el-icon-arrow-right {
          transition: all 0.5s ease;
        }
        .icon {
          width: 0.4rem;
          height: 0.4rem;
          background: #00bf8a;
          border-radius: 50%;
          color: white;
          margin: 0 0.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .key {
          margin: 0 0.2rem;
          // height: 0.52rem;
        }
        .tools_one {
          margin: 0 0.3rem;
        }
      }
      .deep_screen {
        width: 95%;
        margin-left: 5%;
      }
    }
    .messures_line:hover {
      background: rgba($color: #f2f6fc, $alpha: 0.9);
    }
    // 全局筛选
    .total_screen {
      padding: 10px 0;
      width: 99%;
      margin: 0 auto;
      height: 40px;
      display: flex;
      align-items: center;
      color: #307ef2;
      i {
        font-weight: 800;
        margin: 0 10px 0 0;
      }
    }
    // 分组区域
    .group_cig {
      border-top: 1px solid #ebeef5;
      padding: 10px 0;
      width: 100%;
      margin: 0 auto;
      .txt {
        cursor: pointer;
        position: relative;
        i {
          font-weight: 800;
          color: #307ef2;
          margin: 0 0.5rem;
        }
      }
      .tags {
        margin: 0.1rem 0.2rem;
      }
    }
  }
}

// 级联样式
.valueTreeOne {
  display: flex;
  align-items: center;
  border-radius: 4px;
  min-height: 46px;
  i {
    font-weight: 800;
    opacity: 0;
    margin: 0 0.05rem 0 0;
  }
  .el-icon-edit {
    margin: 0 20px;
    opacity: 1;
  }
  .tools_one {
    margin: 0 0.3rem 0 0;
    opacity: 0;
  }
  .tools_one:hover {
    color: #007aff;
    font-weight: 500;
  }
  .el-icon-arrow-right {
    opacity: 1;
  }
  .err:hover {
    color: red;
    // font-size: 16px;
  }
}
.valueTreeOne:hover {
  i,
  .tools_one {
    opacity: 1;
  }
}
.valueTreeTwo {
  padding-left: 20px;
}
// 抽屉壳子元素
.drawer_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 20px 0 10px;
    border-bottom: 1px solid #e4e7ed;
    .til {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: rgba($color: #303133, $alpha: 1);
    }
    i {
      font-size: 16px;
      font-weight: 600;
      transition: all 0.5s ease;
    }
    i:hover {
      transform: rotate(90deg);
      font-size: 20px;
      font-weight: 800 !important;
    }
  }
  section::-webkit-scrollbar {
    display: none;
  }
  section {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 66px;
    padding: 0 0 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    .section_til {
      width: 100%;
      text-indent: 20px;
      height: 30px;
      line-height: 30px;
      text-align: left;
      color: #909399;
      font-size: 12px;
    }
    .min_til {
      font-size: 16px;
      text-indent: 10px;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
      color: #606266;
    }
    .el_com {
      width: 100%;
      padding: 6px 0 6px 30px;
      // height: 60px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el_inp {
        width: 80%;
        // transform: scale(1, 0.9);
      }
      .el_small {
        width: 45%;
        margin: 0 6px 0 0;
      }
      .lang {
        width: 90%;
        // min-width: 400px;
      }
    }
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0;
    border-top: 1px solid #e4e7ed;
    .btn {
      margin: 0 20px;
    }
  }
}
</style>
